<html>
  <head>
    <script type="application/javascript">
      function draw() {
        var ctx = document.getElementById("canvas").getContext("2d");

        // 画背景
        ctx.fillStyle = "rgb(255,221,0)";
        ctx.fillRect(0, 0, 150, 37.5);
        ctx.fillStyle = "rgb(102,204,0)";
        ctx.fillRect(0, 37.5, 150, 37.5);
        ctx.fillStyle = "rgb(0,153,255)";
        ctx.fillRect(0, 75, 150, 37.5);
        ctx.fillStyle = "rgb(255,51,0)";
        ctx.fillRect(0, 112.5, 150, 37.5);

        // 画半透明矩形
        for (var i = 0; i < 10; i++) {
          ctx.fillStyle = "rgba(255,255,255," + (i + 1) / 10 + ")";
          for (var j = 0; j < 4; j++) {
            ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
          }
        }
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
</html>
